<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态表格</title>
<link href="bootstrap.min.css" rel="stylesheet">
 <script src="jquery-3.3.1.min.js"></script>
 <script src="bootstrap.min.js"></script>
<style>

</style>
<script>


function addlisthtml(){
var id=$("#id").val();
var name=$("#name").val();
$("#tableuser").append('<tr><td onclick="oneClick(this)"><input type="checkbox" name="checkselect" onclick="checkAll(this)"/></td><td onclick="twoClick(this);">'+id+'</td><td onclick="threeClick(this);delli(this)">'+name+'</td></tr>');

}


 

function delli(obj){


$(obj).prev().prev().remove();
$(obj).prev().remove();
$(obj).remove();
/*
$("#list").removeChild(obj.previousSibling.previousSibling.previousSibling);
$("#list").removeChild(obj.previousSibling.previousSibling);
$("#list").removeChild(obj.previousSibling);
$("#list").removeChild(obj);
*/
}

function checkAll(c){

$("input[name='checkselect']:checked").each(function(){

 $(this).parent().next().next().remove();
$(this).parent().next().remove();
(this).parent().remove();
})
}

function delAll(){
$("input[name='checkselect']:checked").each(function(){

$(this).parent().next().next().remove();
$(this).parent().next().remove();
$(this).parent().remove();
});
}


function checkOwn(){
 var checkOwn=$("#checkOwn");
				if(checkOwn.prop('checked')){
				$("input[name='checkselect']").attr("checked","checked");
				}else{
				$("input[name='checkselect']").attr("checked","null");
				}	
//$().each(function(){})
}

function opposed(){
$("input[name='checkselect']").each(function(){
$(this).prop('checked',!$(this).prop('checked'));
})
}

</script>
</head>
<body>
<div class="container">
<table border="1" id="tableuser" align="center" height="300px" width="500px" class="table table-hover">
<thead>
<tr id="list">
<th>选中</th>
<th>编号</th>
<th>姓名</th>

</tr>
<tr>
<td><input type="checkbox" name="checkselect" onclick="checkAll(this)"/></td>
<td>SX001</td>
<td>李白</td>
</tr>
</thead>
</table>

<hr/>

<form>
<table class="table table-hover">
<tr>
<td>编号</td>
<td><input type="text" name="number" id="id"/></td>
</tr>
<tr>
<td>姓名 </td>
<td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
<td><input type="reset" value="重置"/></td>
<td>
<input type="button" value="添加" onclick="addlisthtml()"/>
<input type="button" value="全部删除" onclick="delAll()"/>
</td>
</tr>
<tr>
<td><input type="button" value="全选"/><input type="checkbox" onclick="checkOwn()" id="checkOwn"/></td>
<td><input type="button" value="反选"/><input type="checkbox" onclick="opposed()" id="opposed"/></td>
</tr>
</table>
</form>
</div>

</body>
</html>